<#include "../template/template_listPage.ftl">
<@header title="地区查询">
<style type="text/css">

</style>
<SCRIPT type="text/javascript">
    <!--
    var demoMsg = {
        async:"正在进行异步加载，请等一会儿再点击...",
        expandAllOver:"全部展开完毕",
        asyncAllOver:"后台异步加载完毕",
        asyncAll:"已经异步加载完毕，不再重新加载",
        expandAll:"已经异步加载完毕，使用 expandAll 方法"
    }
    var setting = {
        async:{
            enable:true,
            url:getUrl,
            dataFilter:filter
        },
        data:{
            simpleData:{
                enable:false
            }
        },
        check:{
            enable:true
        },
        view:{
            expandSpeed:""
        },
        callback:{
            beforeAsync:beforeAsync,
            onAsyncSuccess:onAsyncSuccess,
            onAsyncError:onAsyncError,
            onCheck:ShowCheckNode
        }
    };
    var zNodes = [
        {name:"全国", isParent:true, id:"000000",grade:1}
    ];
    function getUrl(treeId, treeNode) {
        var curCount = (treeNode.children) ? treeNode.children.length : 0;
        var grade = treeNode.grade;
        if (grade == undefined) {
            grade = '5';
        }
        var param = "parentCode=" + treeNode.id + "&grade=" + grade;
        return "${web_base}/recharge/area!loadzTree.htm?" + param;
    }
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    function beforeAsync() {
        curAsyncCount++;
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {
        curAsyncCount--;
        if (curStatus == "expand") {
            expandNodes(treeNode.children);
        } else if (curStatus == "async") {
            asyncNodes(treeNode.children);
        }

        if (curAsyncCount <= 0) {
            if (curStatus != "init" && curStatus != "") {
                $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
                asyncForAll = true;
            }
            curStatus = "";
        }
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        curAsyncCount--;

        if (curAsyncCount <= 0) {
            curStatus = "";
            if (treeNode != null) asyncForAll = true;
        }
    }

    var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
            goAsync = false;
    function expandAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.expandAll);
            zTree.expandAll(true);
        } else {
            expandNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.expandAll);
                curStatus = "";
            }
        }
    }
    function expandNodes(nodes) {
        if (!nodes) return;
        curStatus = "expand";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            } else {
                goAsync = true;
            }
        }
    }

    function asyncAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.asyncAll);
        } else {
            asyncNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.asyncAll);
                curStatus = "";
            }
        }
    }
    function asyncNodes(nodes) {
        if (!nodes) return;
        curStatus = "async";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children);
            } else {
                goAsync = true;
                zTree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    function reset() {
        if (!check()) {
            return;
        }
        asyncForAll = false;
        goAsync = false;
        $("#demoMsg").text("");
        $.fn.zTree.init($("#treeDemo"), setting,zNodes);
    }

    function check() {
        if (curAsyncCount > 0) {
            $("#demoMsg").text(demoMsg.async);
            return false;
        }
        return true;
    }
    function ShowCheckNode(event, treeId, treeNode) {
//        alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked+","+treeNode.level);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes(true);
        var purview = "";
        for (var i = 0; i < nodes.length; i++) {
            if (!nodes[i].getCheckStatus().half) {
                if (nodes[i].level == 0) {
                    purview = nodes[i].id;
                    break;
                } else if (nodes[i].level > 0) {
                    var parentNode = nodes[i].getParentNode();
                    if (parentNode.checked && !parentNode.getCheckStatus().half) {
                        delete nodes[i];
                        continue;
                    }
                }
            }
        }
        if (purview == "") {
            for (var i in nodes) {
                if (nodes[i] != undefined && !nodes[i].getCheckStatus().half) {
                    purview += nodes[i].id + ",";
                }
            }
        }
        alert(purview);
    }
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        asyncAll();
        $("#expandAllBtn").bind("click", expandAll);
        $("#asyncAllBtn").bind("click", asyncAll);
        $("#resetBtn").bind("click", reset);
    });
    //-->
</SCRIPT>
</@header>
<body class="list">

<h1>异步加载模式下全部展开</h1>
<h6>[ 文件路径: super/asyncForAll.html ]</h6>

<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>实现方法说明</h2>
                <ul class="list">
                    <li>利用 onAsyncSuccess / onAsyncError 回调函数 和 reAsyncChildNodes 或 expandNode 方法可以实现全部功能。</li>
                    <li class="highlight_red">如果父节点数量很大，请注意利用延时进行控制，避免异步进程过多。</li>
                    <li class="highlight_red">建议：演示时请利用调试工具查看 network 的 ajax 加载过程。</li>
                    <li>演示操作
                        <br/><br/>
                        [ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        [ <a id="asyncAllBtn" href="#" onclick="return false;">后台自动全部加载</a> ]<br/><br/>
                        [ <a id="resetBtn" href="#" onclick="return false;">Reset zTree</a> ]<br/><br/>

                        <p class="highlight_red" id="demoMsg"></p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>